<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <FormItem name="name" label="名称" :rules="[{ required: true, message: '请输入告警名称' }]">
      <Input v-model:value="formState.name" />
    </FormItem>

    <FormItem name="description" label="描述">
      <Textarea v-model:value="formState.description" />
    </FormItem>

    <FormItem name="ruleType" label="规则类型" :rules="[{ required: true, message: '请选择规则类型' }]">
      <RadioGroup v-model:value="formState['ruleType']">
        <RadioButton value="THRESHOLD">阈值规则</RadioButton>
        <RadioButton value="EVENT">事件类告警</RadioButton>
      </RadioGroup>
    </FormItem>
  </Form>
</template>

<script lang="ts" setup>
import { Form, FormItem, Input, Textarea, RadioGroup, RadioButton } from 'ant-design-vue';
import { onMounted, ref, toRaw, watch } from 'vue';

const emit = defineEmits(['submit', 'rule']);

const formItemLayout = {
  labelCol: { span: 4 },
  labelWidth: 200,
  wrapperCol: { span: 16 },
};

let formState = ref<Record<string, any>>({});
const formRef = ref();

watch(
  () => formState.value.ruleType,
  () => {
    if (formState.value.ruleType) {
      emit('rule', formState.value.ruleType);
    }
  }
);

onMounted(() => {
  formState.value = {};
});

function getFormValue() {
  return formState.value;
}

function setFormValue(fieldValue: any) {
  formState.value = fieldValue;
}

function handleSubmit() {
  formRef.value.validate().then(() => {
    let params = toRaw(formState);
    emit('submit', params);
  });
}

defineExpose({ handleSubmit, setFormValue, getFormValue });
</script>
